<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-blue-50 flex items-center justify-center">
    <div class="text-center">
      <div class="w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-8">
        <FileX class="w-16 h-16 text-gray-400" />
      </div>

      <h1 class="text-6xl font-bold text-gray-900 mb-4">404</h1>
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">页面不存在</h2>
      <p class="text-gray-600 mb-8 max-w-md mx-auto">
        您要查找的页面不存在，可能已被移动或删除。
      </p>

      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <router-link
          to="/"
          class="btn-primary px-6 py-3 flex items-center justify-center gap-2"
        >
          <Home class="w-5 h-5" />
          返回首页
        </router-link>

        <router-link
          to="/history"
          class="btn-secondary px-6 py-3 flex items-center justify-center gap-2"
        >
          <History class="w-5 h-5" />
          历史记录
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Home, History } from 'lucide-vue-next'
</script>